<template>
	<view>
		<!--导航类型，可选：
		1.`fixed`固定导航
		2.`ordinary`不固定导航
		3.`transparent`透明不固定导航
		4.`transparentFixed`透明固定导航

		-->
		<!--<view data-id="AAAA"
			  :class="{
					  'header_fixed'		: navFixed,
					  'header_absolute'		: type == 'transparent',
					  'header_shadow'		: navShadow,
					  'header_colorWhite'	: isWhite,
					  themeBgColor			: themeBgColor
				}"
		 :style="{
			paddingTop		: statusBarHeight + 'px',
			backgroundImage	: navBgColor,
			color			: navFontColor,
			opacity			: transparentValue
		}">
			<view class="header_content">
				<view class="header_left_box">
					<slot name="left">
						<view class="header_left_info" :class="{ 'header_btnMongol':isTwoBtn,'header_colorWhite_btnMongol': isWhite && isTwoBtn}"
						 v-if="back || $slots.left || home">
							<view class="header_left_back" :class="{'header_btnMongol_left_back':isTwoBtn}" v-if="back && !firstPage" @click="onBackPage">
								<image class="header_icon" v-if="isWhite" :src="$tools.j('navBar/icon_back_white.png')" mode="aspectFit"></image>
								<image class="header_icon" v-else :src="$tools.j('navBar/icon_back_black.png')" mode="aspectFit"></image>
							</view>
							<text class="header_left_line" :class="{'header_colorWhite_left_line': isWhite}" v-if="isTwoBtn"></text>
							<view class="header_left_home" :class="{'header_btnMongol_left_home':isTwoBtn}" v-if="(firstPage && back) || home"
							 @click="onBackHome">
								<image class="header_icon" v-if="isWhite" :src="$tools.j('navBar/icon_home_white.png')" mode="aspectFit"></image>
								<image class="header_icon" v-else :src="$tools.j('navBar/icon_home_black.png')" mode="aspectFit"></image>
							</view>
						</view>
					</slot>
					<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)" :style="{color: navFontColor}">
						<slot name="title"><text :style="{color: navFontColor}">{{ navTitle }}</text></slot>
					</view>
				</view>
				<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)" :style="{color: navFontColor}">
					<slot><text :style="{color: navFontColor}">{{ navTitle }}</text></slot>
				</view>
				<view class="header_right_info">
					<slot name="right"></slot>
				</view>
			</view>
		</view>-->

		<!--
			透明固定导航
			transparentFixedFontColor

		-->
		<view data-id="BBBBB" class="header_transparentFixed1111 header_fixed" v-if="type == 'transparentFixed'"
			  :style="transparentFiexedStyle"

		>
			<view class="header_content">
				<view class="header_left_box">
					<slot name="transparentFixedLeft">
						<block v-if="!isHome">
							<view class="header_left_info header_transparentFixed_left_info" :class="{'header_transparentFixed_colorWhite_left_info': isWhite}"
								  v-if="back || $slots.left || home">

								<view class="header_left_home" :class="{'header_btnMongol_left_home':isTwoBtn}" v-if="!goodsDetail  ||((firstPage && back) || home)"
									  @click="onBackHome">
									<image class="header_icon" v-if="isWhite" :src="$tools.j('navBar/icon_home_white.png')" mode="aspectFit"></image>
									<!--<image class="header_icon" v-else :src="$tools.j('navBar/icon_home_black.png')" mode="aspectFit"></image>-->
									<text v-else class="header_icon  cuIcon-homefill text-black" style="font-size:30rpx;"></text>
								</view>

								<view class="header_left_back" :class="{'header_btnMongol_left_back':isTwoBtn}" v-if="back && !firstPage" @click="onBackPage">
									<image class="header_icon" v-if="isWhite" :src="$tools.j('navBar/icon_back_white.png')" mode="aspectFit"></image>
									<image class="header_icon" v-else :src="$tools.j('navBar/icon_back_black.png')" mode="aspectFit"></image>
								</view>
								<text class="header_left_line" v-if="isTwoBtn"></text>
								<view class="header_left_home" :class="{'header_btnMongol_left_home':isTwoBtn}" v-if="goodsDetail"
									  @click.prevent.stop="handleShowGoodsDetail">
									<!--<image class="header_icon" :src="$tools.j('navBar/icon_list_black.png')" mode="aspectFit" ></image>-->
									<view class="iconfont  icon-list  text-black" style="font-size:50rpx;"></view>

								</view>
							</view>
						</block>
						<block v-else>
							<view class="header_left_home padding-left-lg" :class="{'header_btnMongol_left_home':isTwoBtn}" v-if="goodsDetail"
								  @click.prevent.stop="handleShowGoodsDetail">
								<!--<image class="header_icon" :src="$tools.j('navBar/icon_list_black.png')" mode="aspectFit" ></image>-->
								<view :class="navTransparentFixedFontColor==='#FFF'?'text-white':'text-black'" class="iconfont icon-liebiao-bold text-black" style="font-size:50rpx;"></view>
							</view>
						</block>

					</slot>
					<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor}">
						<slot name="transparentFixed"><text :style="{color: navTransparentFixedFontColor}">{{ navTitle }}</text></slot>
					</view>
				</view>
				<view class="header_title header_title_center" v-if="titleCenter && (navTitle || $slots.transparentFixed)" :style="{color: navTransparentFixedFontColor}">
					<slot name="transparentFixed"><text :style="{color: navTransparentFixedFontColor}">{{ navTitle }}</text></slot>
				</view>
				<view class="header_right_info">
					<slot name="transparentFixedRight"></slot>
				</view>
			</view>
		</view>


		<!--86像素的高度固定顶部 -->
		<view data-id="CCCCC" v-if="1 || type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="header_station"></view>
		</view>

		<view data-id="DDDD" class="radius-lg goods-drop-menu" :style="'top:calc('+CustomBar+'px)'" v-if="goodsDetail" v-show="showGoodsDetail" @tap.prevent.stop="handleAlwaysShowGoodsDetail">
			<view class="padding-left padding-tb radius-lg relative goods-drop-menu-content-box" :class="!isHome?'goods-drop-menu-content-box':'goods-drop-menu-content-box goods-drop-menu-content-box-home'" style="box-shadow: 0rpx 0rpx 8rpx rgba(26, 26, 26, 0.2);">
				<view v-for="(item,index) in dropOptions" :key="index">
					<view class="solid-bottom padding-bottom-sm margin-bottom padding-right flex align-center" :class="(index+1===dropOptions.length) ? 'solid-bottom-0 padding-bottom-0':''">
						<text class="text-black" :class="item.icon" style="font-size:30rpx;"></text>
						<text class="margin-left-sm" @tap.prevent.stop="dropTap(item)">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	/*import goodsTop    from '@/components/swiper/goodsTop'*/
	// 主页页面的页面路径
	// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
	// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
	const mainPagePath = ['pages/navList', 'pages/demo6'];
	//返回首页的地址
	const homePath = '/pages/navList';
	//白色表达值
	const whiteList = ['#FFF', '#FFFFFF', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
	export default {
		components:{
		 /*	goodsTop*/
		},
		props: {
			//是否显示返回按钮
			// 1000 显示返回按钮
			// 2000 不显示返回按钮
			// 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
			// 4000 产品详情页list
			backState: {
				default: function() {
					return 1000;
				}
			},
			//是否显示返回首页按钮
			home: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			//是否商品详情页
			goodsDetail: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			//导航背景色，支持渐变
			bgColor: {
				type: [String, Array],
				default: function() {
					return '#FFFFFF';
				}
			},
			// 导航背景色渐变角度
			bgColorAngle: {
				type: [String, Number],
				default: function() {
					return 90;
				}
			},
			//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
			fontColor: {
				type: String,
				default: function() {
					return '#000000';
				}
			},
			//标题是否居中
			titleCenter: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			//标题
			title: {
				type: String,
				default: function() {
					return '';
				}
			},
			//类型 fixed为固定 默认
			// ordinary 普通的 不固定
			// transparent 透明不固定的
			//transparentFixed  透明固定的
			type: {
				type: String,
				default: function() {
					return 'fixed';
				}
			},
			//透明固定的时候字体颜色
			transparentFixedFontColor: {
				type: String,
				default: function() {
					return '#333';
				}
			},
			// 屏幕滑动距离顶部距离(透明固定导航比传)
			scrollTop: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			// 是否显示阴影
			shadow: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			dropOptionsAlias:{
				type:Array,
				default:function () {
					return []
				}
			}
		},
		data() {
			return {

				currentPageUrl:this.$tools.prePageRoute(-1),
				//当前页面是否是第一个页面
				firstPage: false,
				//透明度值
				transparentValue: 1,
				//标题
				navTitle: '',
				//字体色
				navFontColor: '#000000',
				//背景色
				navBgColor: 'none',
				//透明底字体色
				navTransparentFixedFontColor: '#000000',
				// 是否使用
				themeBgColor: false,
				// 导航栏高度
				statusBarHeight: this.$statusBarHeight,
				CustomBar: this.CustomBar+11,
				// 上次显示的导航栏颜色
				lastFrontColor:"",
				dropOptions:[
						{alias:'index',name:'首页',url:'/pages/card/home/home',icon:'cuIcon-home'},
						{alias:'edit',name:'编辑名片',url:'/pages/card/manage/edit',icon:'cuIcon-edit'},
						{alias:'view',name:'预览名片',url:'/pages/card/manage/index',icon:'iconfont icon_yulan'},
						{alias:'editcompany',name:'公司信息',url:'/pages/card/manage/completeCompanyInfo',icon:'iconfont icon-gongsi'},
						{alias:'change',name:'切换名片', url:'/pages/card/manage/change',icon:'iconfont icon-qiehuan'},
						{alias:'collect',name:'名片夹',url:'',icon:'cuIcon-favor'},
						{alias:'add',name:'新增名片',url:'/pages/card/manage/create',icon:'cuIcon-roundadd'},
						{alias:'publiccard',name:'公开库',url:'/pages/card/home/home?page=publiccard',icon:'iconfont icon-kaifangsousuo'},
						{alias:'suggest',name:'用户反馈',url:'',icon:'iconfont cuIcon- icon-Shape'},
						{alias:'my',name:'我的',url:'/pages/card/home/home?page=user',icon:'iconfont icon-wode'}
						]
			};
		},
		computed: {

			isHome(){
				console.log('是首页吗？')
				console.log(this.currentPageUrl==='pages/card/home/home')
				return this.currentPageUrl==='pages/card/home/home'
			},

			showGoodsDetail(){
				console.log('显示下拉')
				console.log(this.$store.getters.dropmenu_show)
				return this.$store.getters.dropmenu_show
			},
			back() {
				return this.backState == 1000 || this.backState == 3000 // || this.backState == 4000
			},
			//导航固定
			navFixed() {
				if (this.type == 'transparentFixed' || this.type == 'fixed') {
					return true;
				} else {
					return false;
				}
			},
			//导航底部线是否显示
			navShadow() {
				if(this.bgColor && typeof(this.bgColor) == "string"){
					return this.shadow && this.type !== 'transparent' && whiteList.includes(this.bgColor);
				}else{
					return false;
				}
			},
			//导航字体是否是白色颜色
			isWhite() {
				return whiteList.includes(this.navFontColor);
			},
			//右上角是否有两个按钮
			isTwoBtn() {

				if(this.goodsDetail){
					return true;
				} else{
					return [1000,3000].includes(this.backState) && this.home && !this.firstPage
				}


			},
			transparentFiexedStyle(){
				//字体是black的话
				let {top_nav_show,top_nav_opacity} =
						this.transparentFixedFontColor=='#333'
								? {top_nav_show:true,top_nav_opacity:1}
								:this.$store.getters

				console.log('transparentFiexedStyle computed')
				console.log({top_nav_show,top_nav_opacity})

				let transparentValue,navTransparentFixedFontColor
				//不透明
				if(top_nav_show){
					transparentValue = 1-top_nav_opacity
					navTransparentFixedFontColor ='#FFF';
				}else{
					transparentValue             = this.transparentValue
					navTransparentFixedFontColor = this.navTransparentFixedFontColor
				}
				return `padding-top: ${this.statusBarHeight}px;
		     	        color:      ${navTransparentFixedFontColor};
		     	        background-image: ${this.navBgColor};
		     	        opacity11111: ${1-transparentValue};
		     	        ${top_nav_show  ? 'background-image:none;background-color:#fff;':''}
		     	        z-index11111: ${transparentValue < 0.3 ? 100 : 90};
		     	        `
			}
		},
		watch: {
			title(val) {
				this.navTitle = val;
			},
			fontColor(val) {
				this.navFontColor = val;
				this.settingColor();
			},
			bgColor(val) {
				this.getNavBgColor(val);
			},
			transparentFixedFontColor(val) {
				this.navTransparentFixedFontColor = val;
			},
			scrollTop(val) {
				this.pageScroll({
					scrollTop: val
				});
			},

		},
		//第一次加载
		created() {
			console.log('当前的页面是')
			console.log(this.$tools.prePageRoute(-1))
			console.log('当前的页面是结束')
			this.navTitle = this.title;
			this.navFontColor = this.fontColor;
			this.getNavBgColor(this.bgColor);
			this.navTransparentFixedFontColor = this.transparentFixedFontColor;
			//获取手机状态栏高度
			//this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			//this.statusBarHeight = this.statusBarHeight
			const _this = this;
			this.pageScroll({
				scrollTop: this.scrollTop
			});
			//获取所有页面
			let currentPages = getCurrentPages();
			let pageLen = currentPages.length;
			//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
			if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
				this.firstPage = true;
			}
			if(this.goodsDetail && this.dropOptionsAlias.length>0){
				this.dropOptions = this.dropOptions.filter(v=>this.dropOptionsAlias.includes(v.alias))
			}
		},
		//方法
		methods: {
			scrollTo(pos){
				console.log('jieshoudao')
				console.log(pos)
				this.$emit('scrollTo',pos)
			},
			dropTap(item){
				if(item.url){
					let replace=false
					if(['index','my','change','user','publiccard'].includes(item.alias)) replace=true

					console.log(item.url+' replace '+replace)
					this.$tools.goTo(item.url,replace)
					this.$store.dispatch('dropMenu/showHide',false)
					this.$store.dispatch('address/set')
				}

			},
			//返回上一页面
			onBackPage() {
				if (this.backState == 3000) {
					this.$emit('backClick');
				} else {
					uni.navigateBack();
				}
			},
			handleShowGoodsDetail(){
				this.$store.dispatch('dropMenu/showHide',!this.$store.getters.dropmenu_show)
			},
			handleAlwaysShowGoodsDetail(){
				this.$store.dispatch('dropMenu/showHide',true)
			},
			//返回首页
			onBackHome() {
				this.$tools.goTo('/pages/card/home/home');
			},
			pageScroll(e) {
				if (this.type == 'transparentFixed') {
					if (e.scrollTop && e.scrollTop > 0) {
						if (e.scrollTop > 180) {
							this.transparentValue = 1;
						} else {
							this.transparentValue = e.scrollTop / 180;
						}
					} else {
						this.transparentValue = 0;
					}
					this.settingColor();
				}
			},
			// 获取导航背景颜色
			getNavBgColor(val) {
				console.log('获取导航背景颜色')
				if (val == 'themeBgColor') {
					this.themeBgColor = true;
					this.navBgColor = 'none';
				} else if (this.type == 'transparent') {
					this.themeBgColor = false;
					this.navBgColor = 'none';
				} else {
					if (typeof val == 'string') {
						this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
					} else if (Array.isArray(val) && val.length >= 2) {
						let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
						val.forEach(item => {
							if (typeof item == 'string') {
								navBgColor += ',' + item;
							} else if (typeof item == 'object') {
								navBgColor += ',' + item.color + ' ' + item.scale;
							}
						});
						navBgColor += ')';
						this.navBgColor = navBgColor;
					}
				}
				console.log('hahhah')
				console.log(this.navBgColor)
			},
			//设置手机状态栏颜色
			settingColor() {
				let navColor = this.navFontColor;
				if (this.type == 'transparentFixed' && this.transparentValue <= 0.5) {
					navColor = this.navTransparentFixedFontColor;
				}
				let frontColor = "#000000";
				if (whiteList.includes(navColor)) {
					frontColor = '#ffffff';
				}
				if (this.lastFrontColor == frontColor) {
					return;
				}
				setTimeout(() => {
					this.lastFrontColor = frontColor;
					// 改变手机状态栏颜色
					uni.setNavigationBarColor({
						frontColor: frontColor,
						backgroundColor: "#FFFFFF"
					});
				}, 150);
			},
			mounted(){
			}

		}
	};
</script>
<style lang="scss">
	/* #ifdef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0rpx;
	}
	/* #endif */
	/* #ifndef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0upx;
	}
	/* #endif */
	.header_content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* #ifdef MP */
		padding-right: unit(190);
		box-sizing: border-box;
		/* #endif */
		width: unit(750);
		align-items: flex-end;
		justify-content: space-between;
		flex-direction: row;
		height: unit(88);
		position: relative;
	}

	.header_station {
		height: unit(88);
	}

	.header_shadow {
		// border-style: solid;
		// border-width: unit(2);
		// border-color: #f5f5f5;
		box-shadow: 0 0 unit(6) 0 #ddd;
	}

	.header_fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: unit(750);
		z-index: 99;
	}

	.header_absolute {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		width: unit(750);
		background-color: transparent !important;
	}

	.header_left_box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		height: unit(88);
		flex: 1;
	}

	.header_left_line {
		height: unit(35);
		width: unit(2);
		background-color: rgba(0, 0, 0, 0.2);
		//background-color: rgba(255, 255, 255, 0.8);
	}

	.header_left_back {
		width: unit(56);
		height: 100%;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.header_icon {
		width: unit(30);
		height: unit(30);
	}

	.header_left_home {
		width: unit(56);
		height: 100%;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.header_left_info {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		height: unit(61);//修改高度
		margin-left: unit(16);
	}

	.header_title {
		height: unit(88);
		font-size: unit(32);
		padding-left: unit(30);
		padding-right: unit(30);
		font-weight: 700;
		text-overflow: ellipsis;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		/* #endif */
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* #ifdef MP */
		max-width: calc(100vw - 160upx);
		/* #endif */
	}

	.header_title_center {
		position: absolute;
		bottom: unit(0);
		left: unit(375);
		transform: translateX(-50%);
	}

	.header_right_info {
		height: unit(88);
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		flex-shrink: 0;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.header_btnMongol {
		border-radius: unit(33);
		border-style: solid;
		border-width: unit(2);
		border-color: rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 255, 255, 0.7);
		/* #ifndef APP-PLUS-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.header_btnMongol_left_back,
	.header_btnMongol_left_home {
		width: unit(80);
	}

	.header_transparentFixed {
		border-bottom-width: 0;
		background-color: transparent;
		background-image: transparent;
	}

	.header_transparentFixed_left_info {
		border-style: solid;
		border-width: unit(2);
		border-color: rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: unit(33);
		/* #ifndef APP-PLUS-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.header_transparentFixed_colorWhite_left_info {
		border-style: solid;
		border-width: unit(2);
		border-color: rgba(255, 255, 255, 0.3);
		background-color: rgba(0, 0, 0, 0.2);
	}

	//颜色白色
	.header_colorWhite_btnMongol {
		border-style: solid;
		border-width: unit(2);
		border-color: rgba(255, 255, 255, 0.3);
		background-color: rgba(0, 0, 0, 0.2);
	}

	.header_colorWhite_left_line {
		background-color: rgba(255, 255, 255, 0.3);
	}



	/********商品详情页下拉****/
	.goods-drop-menu{
		position: fixed;
		background: white;
		left:27rpx; //16rpx+80/2rpx
		z-index:1000;
	}
	.goods-drop-menu-content-box::after {
		content: "";
		top: -15rpx;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		z-index: 100;
		display: inline-block;
		overflow: hidden;
		width: 30rpx;
		height: 30rpx;
		left:98rpx;
		right: initial;
		background-color:#FFF;
		border-left: 1upx solid rgba(0, 0, 0, 0.1);
		border-top:1upx solid rgba(0, 0, 0, 0.1);

	}
	.goods-drop-menu-content-box-home::after {

		left:24rpx;

	}
</style>
